<template lang="">
  <h3>{{ $t("yaoQ") }}<span></span></h3>

  <div class="recommended-details">
    <a-table :dataSource="dataSource" :columns="columns" :pagination="false" />
    <div class="share">
      <h4 class="recommended-title">
        分享下方的邀请码或者二维码。邀请好友注册游戏，即可领取现金奖励！
        简单三步，快来分享试试吧！
      </h4>
      <div class="step">
        <img src="@/assets/images/invitation-step.png" alt="invitation-step" />
        <ul class="step-content">
          <li>1.分享活动给您好友</li>
          <li>2.好友接受您的邀请</li>
          <li>3.好友注册游戏</li>
        </ul>
      </div>
      <div class="share-content">
        <div class="invitation-code">
          <p class="invitation-code-title">邀请码</p>
          <p class="invitation-code-text">{{ invitationInfo.invitation_code }}</p>
        </div>
        <div class="invitateion-operation">
          <a-button
            type="primary"
            ghost
            size="large"
            block
            @click="onCopyText(invitationInfo.invitation_code)"
            >复制邀请码</a-button
          >
          <a-button
            type="primary"
            size="large"
            @click="onCopyText(invitationInfo.invitation_url)"
            >复制邀请链接</a-button
          >
          <a-button
            type="primary"
            danger
            size="large"
            @click="() => setVisible(true)"
            >查看邀请图</a-button
          >
        </div>
      </div>

      <a-image
        :width="200"
        :style="{ display: 'none' }"
        :preview="{
          visible,
          onVisibleChange: setVisible,
        }"
        :src="invitationInfo.poster_url"
      />
    </div>
  </div>

  <div class="inviteFriend">
    <a-tabs v-model:activeKey="activeKey" size="large">
      <a-tab-pane key="1" tab="推荐首充">
        <div class="invitation-remark">
          <h2>
            <p>{{ $t("huoD-1") }}</p>
          </h2>
          <div>
            <div style="">
              <p>
                <strong>{{ $t("huoD-2") }}</strong
                ><br />{{ $t("2022") }}
              </p>
              <p>
                <strong>{{ $t("huoD-3") }}</strong
                ><br />{{ $t("aiBo") }}
              </p>
              <p>
                <strong>{{ $t("huoD-4") }}</strong>
              </p>
              <ul>
                <li>
                  {{ $t("ninY") }}<br /><br /><span style="color: #ff0000">{{
                    $t("juLi")
                  }}</span>
                </li>
                <li>
                  <p>
                    {{ $t("aYon") }}<br />{{ $t("aYon-0") }}<br />{{
                      $t("aYon-1")
                    }}<br />{{ $t("aYon-2") }}
                  </p>
                  <p>{{ $t("zhuY") }}</p>
                </li>
              </ul>
              <p style="text-align: center">
                <span style="color: #dcb3a9"
                  ><strong
                    ><span style="font-size: 14pt">{{
                      $t("huoD-5")
                    }}</span></strong
                  ></span
                >
              </p>
              <ol>
                <li style="text-align: left">
                  <span style="font-size: 12pt">{{ $t("ninY-0") }}</span>
                </li>
                <li style="text-align: left">
                  <span style="font-size: 12pt"
                    >{{ $t("ninY-1") }}<span style="color: #ff0000">≥500</span
                    >{{ $t("yuan") }}<br
                  /></span>
                </li>
                <li style="text-align: left">
                  <span style="font-size: 12pt"> {{ $t("yaoQ-0") }}</span>
                </li>
                <li style="text-align: left">
                  <span style="font-size: 12pt">{{ $t("huoD-6") }}</span>
                </li>
                <li data-v-2f67f91f="">
                  <span style="font-size: 12pt">{{ $t("meiW") }}</span>
                </li>
                <li data-v-2f67f91f="">
                  <span style="font-size: 12pt">{{ $t("ruoF") }}</span>
                </li>
                <li style="text-align: left">
                  <span style="font-size: 12pt">{{ $t("ciHu") }}<br /></span>
                </li>
              </ol>
            </div>
          </div>
        </div>
      </a-tab-pane>

      <a-tab-pane key="2" tab="推荐充值优惠">
        <div class="invitation-remark">
          <h2>
            <p>{{ $t("huoD-7") }}</p>
          </h2>
          <div>
            <div style="">
              <p>
                <strong>{{ $t("huoD-8") }}</strong
                ><br />{{ $t("2022-0") }}
              </p>
              <p>
                <strong>{{ $t("huoD-9") }}</strong
                ><br />{{ $t("aiBo-0") }}
              </p>
              <p>
                <strong>{{ $t("huoD-10") }}</strong
                ><br />{{ $t("ninY-2") }}<span style="color: #ff0000">≥500</span
                >{{ $t("yuan-0") }}
              </p>
              <p>{{ $t("zuoW") }}</p>
              <p>
                <span style="font-size: 12pt"
                  ><strong
                    ><span style="color: #ff0000">{{
                      $t("juLi-0")
                    }}</span></strong
                  ></span
                >{{ $t("huiY-3") }}
              </p>
              <p>
                <span style="color: #dcb3a9"
                  ><strong
                    ><span style="font-size: 14pt">{{
                      $t("beiY")
                    }}</span></strong
                  ></span
                >
              </p>
              <table
                style="
                  width: 100%;
                  border-collapse: collapse;
                  margin-left: auto;
                  margin-right: auto;
                "
                border="1"
              >
                <tbody>
                  <tr style="background-color: #dcb3a9">
                    <td style="width: 33.3333%; text-align: center">
                      <span style="color: #0000ff"
                        ><strong>{{ $t("zhuan-3") }}</strong></span
                      >
                    </td>
                    <td style="width: 33.3333%; text-align: center">
                      <span style="color: #0000ff"
                        ><strong>{{ $t("zeng") }}</strong></span
                      >
                    </td>
                    <td style="width: 33.3333%; text-align: center">
                      <span style="color: #0000ff"
                        ><strong>{{ $t("liuS") }}</strong></span
                      >
                    </td>
                  </tr>
                  <tr>
                    <td style="width: 33.3333%; text-align: center">
                      <p>{{ $t("500Y") }}</p>
                    </td>
                    <td style="width: 33.3333%; text-align: center">
                      {{ $t("188Y") }}
                    </td>
                    <td style="width: 33.3333%; text-align: center">
                      {{ $t("caiJ") }}
                    </td>
                  </tr>
                </tbody>
              </table>
              <p>
                <span style="color: #dcb3a9"
                  ><strong
                    ><span style="font-size: 14pt">{{
                      $t("yaoQ-1")
                    }}</span></strong
                  ></span
                >
              </p>
              <table
                style="
                  width: 100%;
                  border-collapse: collapse;
                  margin-left: auto;
                  margin-right: auto;
                "
                border="1"
              >
                <tbody>
                  <tr style="background-color: #dcb3a9">
                    <td style="width: 33.3333%; text-align: center">
                      <span style="color: #0000ff"
                        ><strong>{{ $t("zhuan-4") }}</strong></span
                      >
                    </td>
                    <td style="width: 33.3333%; text-align: center">
                      <span style="color: #0000ff"
                        ><strong>{{ $t("zeng-0") }}&nbsp;</strong></span
                      >
                    </td>
                    <td style="width: 33.3333%; text-align: center">
                      <span style="color: #0000ff"
                        ><strong>{{ $t("liuS-0") }}</strong></span
                      >
                    </td>
                  </tr>
                  <tr>
                    <td style="width: 33.3333%; text-align: center">
                      <p>{{ $t("500Y-0") }}</p>
                    </td>
                    <td style="width: 33.3333%; text-align: center">
                      {{ $t("188Y-0") }}&nbsp;
                    </td>
                    <td style="width: 33.3333%; text-align: center">
                      {{ $t("caiJ-0") }}
                    </td>
                  </tr>
                </tbody>
              </table>
              <p style="text-align: center">
                <span style="color: #dcb3a9"
                  ><strong
                    ><span style="font-size: 14pt">{{
                      $t("huoD-11")
                    }}</span></strong
                  ></span
                >
              </p>
              <ol>
                <li style="text-align: left">
                  {{ $t("huoD-12") }}<span style="color: #ff0000">≥500</span
                  >{{ $t("yuan-1") }}
                </li>
                <li style="text-align: left">
                  {{ $t("huoD-13") }}<span style="color: #ff0000">≥500</span
                  >{{ $t("bing-1") }}
                </li>
                <li style="text-align: left">
                  {{ $t("chang") }}<span style="color: #ff0000">≥500</span
                  >{{ $t("yuan-2") }}
                </li>
                <li style="text-align: left">
                  {{ $t("chang-0") }}<br />{{ $t("fanL")
                  }}<span style="color: #ff0000">≥500</span>{{ $t("yuan-3")
                  }}<br />{{ $t("fanL-0") }}<br />{{ $t("fanL-1")
                  }}<span style="color: #ff0000">≥500</span>{{ $t("yuan-4") }}
                </li>
                <li style="text-align: left">{{ $t("gaiH") }}</li>
                <li style="text-align: left">{{ $t("caiJ-1") }}</li>
                <li style="text-align: left">{{ $t("huoD-14") }}</li>
                <li style="text-align: left">{{ $t("meiW-0") }}</li>
                <li style="text-align: left">{{ $t("ruoF-0") }}</li>
                <li style="text-align: left">{{ $t("ciHu-0") }}</li>
              </ol>
            </div>
          </div>
        </div>
      </a-tab-pane>

      <a-tab-pane key="3" tab="投注任务">
        <div class="invitation-remark">
          <h2>
            <p>{{ $t("huoD-15") }}</p>
          </h2>
          <div>
            <div style="">
              <div>
                <strong>{{ $t("huoD-16") }}</strong>
                <br />{{ $t("2022-1") }}
              </div>
              <div>&nbsp;</div>
              <div>
                <strong>{{ $t("huoD-17") }}</strong>
                <br />{{ $t("aiBo-1") }}
              </div>
              <div>&nbsp;</div>
              <div>
                <strong>{{ $t("huoD-18") }}</strong>
                <br />{{ $t("ninK-0") }}
                <span style="color: #ff0000"><strong>0.15%</strong></span
                >{{ $t("fanL-2") }}
              </div>
              <div>&nbsp;</div>
              <div style="text-align: center">
                <span style="color: #dcb3a9"
                  ><strong
                    ><span style="font-size: 14pt">{{
                      $t("huoD-19")
                    }}</span></strong
                  ></span
                >
              </div>
              <div style="text-align: center">&nbsp;</div>
              <ol>
                <li style="text-align: left">{{ $t("youX-2") }}</li>
                <li style="text-align: left">{{ $t("youX-3") }}</li>
                <li style="text-align: left">{{ $t("youX-4") }}</li>
                <li style="text-align: left">{{ $t("youX-5") }}</li>
                <li style="text-align: left">{{ $t("youX-6") }}</li>
                <li style="text-align: left">{{ $t("ninD") }}</li>
                <li style="text-align: left">{{ $t("huoD-20") }}</li>
                <li style="text-align: left">{{ $t("meiW-1") }}</li>
                <li style="text-align: left">{{ $t("ruoF-1") }}</li>
                <li style="text-align: left">{{ $t("ciHu-1") }}</li>
              </ol>
            </div>
            <!---->
          </div>
        </div>
      </a-tab-pane>
    </a-tabs>
  </div>
</template>
<script setup lang="ts">
import { getUserRecommendationPlan } from "@/api/account";
import { copyTextToClipboard } from "@/utils";
import { ref, reactive, onBeforeMount } from "vue";
import { message } from "ant-design-vue";

const invitationInfo = reactive<any>({
  invitation_url: `https://win183.com/#/register?code=IXMI76`, // 邀请地址
  invitation_code: "IXMI76", // 邀请码
  poster_url: "https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png", // 海报链接
});
const activeKey = ref("1");
const visible = ref<boolean>(false);

const dataSource = ref<any[]>([]);
const columns = ref<any[]>([
  {
    title: "推荐人数",
    dataIndex: "member_count_limit",
    key: "member_count_limit",
  },
  {
    title: "存款次数",
    dataIndex: "member_count_remained",
    key: "member_count_remained",
  },
  {
    title: "奖励",
    dataIndex: "reward",
    key: "reward",
  },
  {
    title: "已派发",
    dataIndex: "hasBeenDistributed",
    key: "hasBeenDistributed",
  },
]);
const setVisible = (value: boolean): void => {
  visible.value = value;
};

function cleanData(data: any[]) {
  if (Array.isArray(data)) {
    dataSource.value = data.map((sItem) => {
      sItem.key = sItem.id;
      return sItem;
    }); 

    const item = data[0];
    if (item.invitation_code) {
      invitationInfo.invitation_code = item.invitation_code;
      invitationInfo.invitation_url = `https://win183.com/#/register?code=${item.invitation_code}`; // 邀请地址
    }
    if (item.poster_url) {
      invitationInfo.poster_url = item.poster_url;
    }
  }
}

onBeforeMount(() => {
  getUserRecommendationPlan()
    .then((res: any) => {
      if (Array.isArray(res.list)) {
        cleanData(res.list);
      }
    })
    .catch((err: any) => {
      console.log(err);
    });
});

async function onCopyText(text: string) {
  const result = await copyTextToClipboard(text);
  if (result) {
    message.success("复制成功");
  } else {
    message.warning("复制失败, 请重新尝试！");
  }
}
</script>
<style lang="less" scoped>
.recommended-details {
  margin-bottom: 30px;
}
.share {
  .step {
    img {
      max-width: 500px;
    }
  }
  .step-content {
    display: flex;
    justify-content: space-between;
    margin-top: 5px;
    list-style: none;
    max-width: 500px;
  }
  .share-content {
    background: #f6f3fb;
    border-radius: 10px;
    padding-top: 25px;
    padding-bottom: 25px;
    display: flex;
    color: #696969;

    justify-content: space-around;
    align-items: center;
    max-width: 500px;
  }

  .recommended-title {
    margin-top: 25px;
    margin-bottom: 20px;
  }

  .invitation-code {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    .invitation-code-title {
      margin-bottom: 12px;
      font-size: 20px;
    }
    .invitation-code-text {
      font-size: 20px;
      margin-bottom: 0;
    }
  }
  .invitateion-operation {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding-right: 20px;

    .ant-btn {
      margin-bottom: 10px;
    }
  }
}
</style>
